var canvas =  document.getElementById('canvas');
var context = canvas.getContext('2d');

function drawGrid(){
    context.beginPath();
    context.lineWidth = 1;
    context.strokeStyle='lightgray';
    for(var i=10 + 0.5; i < canvas.width;i += 10){
        context.moveTo(i,0);
        context.lineTo(i,400);
        context.stroke();
    }

    context.beginPath();
    for(var i=10 + 0.5; i < canvas.height;i += 10) {
        context.moveTo(0,i);
        context.lineTo(600,i);
        context.stroke();
    }
}

drawGrid();

context.strokeStyle='blue';
context.beginPath();
context.moveTo(20, 50);
context.lineTo(20,350);
context.stroke();

context.beginPath();
context.moveTo(20,350);
context.lineTo(550, 350);
context.stroke();

for(var i=30; i< 550;i += 10){
    context.beginPath();
    context.moveTo(i,345);
    context.lineTo(i,355);
    context.stroke();
}

